<template>
  <div class="list_chart">
    <div class="item border_bottom" v-for="(item, index) in data" :key="'list' + index">
      <div class="left">
        <i :class="['iconfont', item.icon]"></i>
        <div class="title">
          <div class="text">
            <span class="name">{{ item.name }}</span>
            <span class="count">{{ item.count }}笔</span>
            <span>{{ item.proportion }}%</span>
          </div>
          <div class="jindutiao" :style="{width: `${item.proportion}%`, backgroundColor: getRandomColor()}"></div>
        </div>
      </div>
      <div class="right">
        <div class="money">-{{ (item.money).toFixed(2) }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup() {
    const colorArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    const getRandomColor = () => {
      let color = "#"
      for(let i = 0; i < 6; i++){
				color += colorArr[Math.floor(Math.random()*10 + 6)];
			}
      return color
    }
    return {
      getRandomColor
    }
  }
})
</script>

<style scoped>
  .list_chart {
    padding: 16px;
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
  }
  .border_bottom {
    border-bottom: 1px solid #cccccc99;
  }
  .item .left {
    display: flex;
    align-items: center;
  }
  .left i {
    margin-right: 10px;
    font-size: 20px;
    color: #f9c3c2;
  }
  .item .title {
    width: calc(100vw - 160px);
    text-align: left;
  }
  .item .count {
    display: inline-block;
    margin: 0 8px;
  }
  .jindutiao {
    height: 6px;
    margin-top: 10px;
    background-color: tan;
    border-radius: 4px;
  }
</style>